import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Modal, ActivityIndicator } from 'react-native';

const LoadingModal = (props) => {

    const [visible, setVisible] = useState(false);

    useEffect(() => {
        setVisible(props.visible)
    }, [props])

    return (
        <Modal
            animationType={"fade"}
            transparent={true}
            visible={visible}
            onRequestClose={() => {
                setVisible(false)
            }}>
            <View style={styles.container}>
                <View style={styles.load_box}>
                    <ActivityIndicator animating={true} color='#FFF' size={'large'}
                        style={styles.load_progress} />
                    <Text style={styles.load_text}>Loading...</Text>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    load_box: {
        width: 100,
        height: 100,
        backgroundColor: '#000',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10
    },
    load_progress: {
        width: 50,
        height: 50
    },
    //默认字体颜色
    load_text: {
        color: '#FFF',
    },
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(178,178,178,0.8)',
    },
})
export default LoadingModal